import React, { useCallback } from "react";
import { View, Button, Image } from "@tarojs/components";
import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";
import ComA from "../../components/comA";
import ComB from "../../components/ComB";

import logo from "./hook.png";

import "./index.less";
import Taro from "@tarojs/taro";

const Index = () => {
    const env = useEnv();
    const [_, { setTitle }] = useNavigationBar({ title: "Taro Hooks" });
    const [show] = useModal({
        title: "Taro Hooks!",
        showCancel: false,
        confirmColor: "#8c2de9",
        confirmText: "支持一下",
        mask: true
    });
    const [showToast] = useToast({ mask: true });

    const handleModal = useCallback(() => {
        show({ content: "不如给一个star⭐️!" }).then(() => {
            showToast({ title: "点击了支持!" });
        });
    }, [show, showToast]);

    const goToFirstPage= (()=>{
        Taro.navigateTo({url:'/pages/indexDemo/indexDemo'})
    })

    return (
        <View className="wrapper">
            <Image className="logo" src={logo} />
            <ComA></ComA>
            <ComB getValA={false}></ComB>
            <View className="flex items-center justify-center w-full px-20 mt-20">
                <View className="bg-main">11111</View>
                <View>22222</View>
            </View>
            <View className="flex items-center justify-center w-full safety-p">
                <View>11111</View>
                <View>22222</View>
            </View>
            <Button onClick={goToFirstPage} className="text-16">跳转</Button>
            <Button
                className="button"
                onClick={() => setTitle("Taro Hooks Nice!")}
            >
                设置标题
            </Button>
            <Button className="button" onClick={handleModal}>
                使用Modal
            </Button>
        </View>
    );
};

export default Index;
